<template>
  <div class="mapCon">
    <el-form style="height:60px;">
      <el-form-item style="margin-bottom:0;padding-top:12px;padding-left:12px;">
        <el-col :span="3">
          <el-date-picker type="date" placeholder="开始时间" value-format="yyyyMMdd HH:mm:ss" v-model="form.startTime"></el-date-picker>
        </el-col>
        <el-col class="line" :span="1">-</el-col>
        <el-col :span="3">
          <el-date-picker type="date" placeholder="结束时间" value-format="yyyyMMdd HH:mm:ss" v-model="form.endTime"></el-date-picker>
        </el-col>
        <el-button type="primary" @click="query">查询</el-button>
        <el-button @click="clearForm">清空</el-button>
      </el-form-item>
    </el-form>
    <baidu-map class="map" :center="map.center" :zoom="map.zoom" @ready="handler">
      <!--热力图-->
      <bml-heatmap :data="heatNum" :max="10000" :radius="20"></bml-heatmap>
      <!-- bm-marker -->
      <bm-marker v-for="(item,index) in heatNum" @click="showThis(index)" :key="item.index" :position="{lng: item.lng, lat: item.lat}"
        :icon="{url: '../../../static/img/tb.png', size: {width: 23, height: 25}}">
        <bm-info-window :show="item.show" @close="infoWindowClose(index)" :position='{lng:item.lng,lat:item.lat}'
          :width=280 :height=170 :key="index">
          <div class="info-wrap">
            <div class='titsle'>详细信息</div>
            <ul class='con'>
              <li><span class='startIcon'></span><span class='tit'>开始时间：</span>{{item.startTime}}</li>
              <li><span class='endIcon'></span><span class='tit'>结束时间：</span>{{item.endTime}}</li>
              <li><span class='companyIcon'></span><span class='tit'>运营公司：</span>{{item.company}}</li>
              <li><span class='numIcon'></span><span class='tit'>呼叫订单数：</span>{{item.count}}</li>
            </ul>
          </div>
        </bm-info-window>
      </bm-marker>
      <!--缩放-->
      <bm-navigation anchor="BMAP_ANCHOR_TOP_LEFT"></bm-navigation>
      <!--定位-->
      <bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :showAddressBar="true" :autoLocation="true"></bm-geolocation>
    </baidu-map>
  </div>
</template>
<script>
  import {
    selectOrder
  } from "./order";
  import {
    BmlHeatmap
  } from 'vue-baidu-map'
  export default {
    name: "demo",
    components: {
      BmlHeatmap
    },
    data: () => ({
      heatNum: [

      ],
      form: {
        startTime: '',
        endTime: '',
      },
      map: {
        center: {
          lng: 118.778074408,
          lat: 32.0572355018
        },
        zoom: 12,
        show: true,
        dragging: true
      },
    }),
    methods: {
      handler({
        BMap,
        map
      }) {
        let me = this;
        
        // 鼠标缩放
        map.enableScrollWheelZoom(true);
        // 点击事件获取经纬度
        map.addEventListener('click', function(e) {
         
        })
      },
      query() {
        return new Promise((resolve, reject) => {
          selectOrder(this.form).then(res => {
            // 修改
            this.heatNum = res;
          });
        });

      },
      getData() {
        // var res = [{"lng":"118.982511297967","count":"10.0","startTime":"20201009 00:00:00","company":"T3","endTime":"20201009 23:59:59","lat":"31.9142598708923","show":false}, {"lng":"118.871704147945","count":"2101.0","startTime":"20201009 00:00:00","company":"T3","endTime":"20201009 23:59:59","lat":"32.0128285180056","show":false}]
        return new Promise((resolve, reject) => {
          selectOrder().then(res => {
            this.heatNum = res;
          });
        });

      },
      showThis(index) {
        var heat = this.heatNum;
        for (var i = 0; i < heat.length; i++) {
          heat[i].show = false;
        }
        this.heatNum[index].show = true;
      },
      infoWindowClose(index) {
        this.heatNum[index].show = false;
      },
      clearForm() {
        this.form = {};
      }
    },
    mounted() {
      this.getData();
    }
  }
</script>

<style scoped>
  .mapCon {
    height: 100%;
  }

  .map {
    width: 100%;
    height: calc(100% - 60px);
  }

  ul,
  li {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .con {
    color: #333333;
  }

  .con li {
    margin-bottom: 5px;
    display: flex;
    align-items: center;
  }

  .titsle {
    font-weight: 600;
    color: #159F5C;
    padding-bottom: 6px;
    margin-bottom: 6px;
    border-bottom: 2px solid #159F5C;
  }

  .startIcon {
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-right: 5px;
    background: url(startTime.png) no-repeat center center/cover;
  }

  .endIcon {
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-right: 5px;
    background: url(endTime.png) no-repeat center center/cover;
  }

  .companyIcon {
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-right: 5px;
    background: url(company.png) no-repeat center center/cover;
  }

  .numIcon {
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-right: 5px;
    background: url(listNum.png) no-repeat center center/cover;
  }

  .tit {
    color: #bdb3b3;
  }
</style>
